<template>
  <div class="box">
    <div>
      <div class="app1">
        <!--      增加一个搜索框-->
        <el-row class="demo-autocomplete">
          <el-autocomplete
            style="width: calc(15%);"
            v-model="state1"
            v-on:keyup.enter.native="enters()"
            :fetch-suggestions="querySearch"
            placeholder="搜索"
            prefix-icon="el-icon-edit el-input__icon"
            :trigger-on-focus="false"
          ></el-autocomplete>
        </el-row>
      </div>
      <div class="app2">
        <GeminiScrollbar autoshow class="my-scroll-bar">
          <el-menu>
            <!--          新的朋友-->
            <!--            <div @click="request">-->
            <div @click="openRequest()">
              <span class="text1">新朋友</span>
              <pal :info="newFriends"></pal>
            </div>
            <span class="text1">朋友列表</span>

            <!--          遍历用户的朋友列表 , 进行展示用户的朋友列表-->
            <template v-if="this.friends.length!=0">
              <div v-for="(friend,index) in friends" :key=index @click="openFriends(index)">
                <pal :info="friend"></pal>
              </div>
            </template>
          </el-menu>
        </GeminiScrollbar>
      </div>
    </div>
    <!--    用于展示朋友信息的子组件-->
    <div id="app5">
      <!--      显示朋友列表的朋友的具体的信息-->
      <div v-show="FriendsIndex!= null">
        <DetailsFriends :friend="friends[FriendsIndex]"></DetailsFriends>
      </div>
      <!--      显示请求列表的信息-->
      <div v-show="RequestIndex">
        <Request ref="requestMessage"/>
      </div>
      <div>

      </div>
    </div>
  </div>
</template>
<script>
// <!--引入一个子组件 , 进行展示-->
import pal from './Pal'

//引入展示朋友详细信息的子组件
import DetailsFriends from "@/views/Friends/DetailsFriends";

//引入请求列表的子组件
import Request from "@/views/Friends/Request";
import {mapGetters} from 'vuex'

export default {
  name: "Index",
  components: {
    pal,
    DetailsFriends,
    Request
  },
  data() {
    return {
      //新的朋友展示
      newFriends: {
        url: require("@/assets/image/timg.jpg"),
        name: "新的朋友"
      },
      state1: '',

      //  当前操作的朋友信息的索引
      FriendsIndex: null,

      RequestIndex: false,
    }
  },
  methods: {
    openFriends(index) {
      this.FriendsIndex = index;
      this.RequestIndex = false;
    },
    openRequest() {
      this.FriendsIndex = null;
      this.RequestIndex = true;
      //  触发子组件中 , 请求的函数
      this.$refs.requestMessage.getRequest()

    },
    querySearch(queryString, cb) {
      var restaurants = this.friends;
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    //搜索框 , 按下回车 , 触发该函数
    enters() {
      for (let i = 0; i < this.friends.length; i++) {
        if (this.friends[i].name === this.state1) {
          //路由跳转
          this.FriendsIndex = i;
          this.RequestIndex = false;
          return;
        }
      }
    },
  },
  computed: {
    //引入用户的朋友列表 ,
    ...mapGetters(['friends'])
  },
  mounted: function () {
    //  向服务端 , 进行请求,  当前用户的朋友列表 , 以及朋友的详细信息 , 以及聊天记录 , 等等
    this.$store
      .dispatch("user/getFriends")
      .then(() => {
        console.log("朋友列表 , 展示成功");
      })
      .catch((error) => {
        console.log("用户的朋友列表 , 展示失败 , 登录错误" + error);
      })

  }
}
</script>

<style scoped>
.text1 {
  font-size: 11px;
  font-weight: normal;
  color: #2b2f3a;
  padding-left: 2px;

}

.box {
  /*设置高度 100%*/
  min-height: calc(100vh - 50px);
}

.my-scroll-bar {
  /*height: 100%;*/
  min-height: calc(100vh - 90px);
}

/*<!--子组件的大小-->*/
#app5 {
  float: left;
  min-height: calc(100vh - 90px);
  width: calc(85%);
  border-left: 1px solid #999999;
  box-shadow: 0 3px 5px rgba(200, 200, 200, 1.1);
}

.app2 {
  /*指定子盒子的高度 , 宽度*/
  width: calc(15% - 1px);
  height: 1px;
  float: left;
  /*  指定右边框*/
  border-right: 1px solid #999999;
}


</style>
